<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="800px" @open="handleDialogOpen()"
    v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form :model="diseaseModel" :rules="dialogProps.action === 'add' ? addDisease : editDisease" ref="diseaseForm"
      label-width="80px" label-position="right" size="small">
      <el-tabs type="border-card" v-model="activeTabName">
        <el-tab-pane name="diseaseInfoTab" label="基本信息" class="disease-info-tab-pane">
          <el-row>
            <el-col :span="12">
              <el-form-item label="疾病名称">
                <el-input ref="diseaseName" :maxlength="50" v-model="diseaseModel.diseaseName" autofocus></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="异常类型" prop="exceptionTypes">
                <el-select class="parent-select" v-model="diseaseModel.exceptionTypes" placeholder="请选择">
                  <el-option v-for="item in optionET" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否职业病" prop="occupationalDisease">
                <el-select class="parent-select" v-model="diseaseModel.occupationalDisease" placeholder="请选择">
                  <el-option v-for="item in optionOD" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="适用性别" prop="applyGender">
                <el-select class="parent-select" v-model="diseaseModel.applyGender" placeholder="请选择">
                  <el-option v-for="item in optionAG" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="就医期限" prop="medicalTreatmentPeriod">
                <el-select class="parent-select" v-model="diseaseModel.medicalTreatmentPeriod" placeholder="请选择">
                  <el-option v-for="item in optionMTP" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="就诊科室" prop="clinicDepartment">
                <el-select class="parent-select" v-model="diseaseModel.clinicDepartment" placeholder="请选择">
                  <el-option v-for="item in optionCD" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="预警等级" prop="warningLevel">
                <el-select class="parent-select" v-model="diseaseModel.warningLevel" placeholder="请选择">
                  <el-option v-for="item in optionWL" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="其他名称">
                <el-input class="properties-textarea" type="textarea" :rows="3" v-model="diseaseModel.restsName">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="医学解释">
                <el-input class="properties-textarea" type="textarea" :rows="3"
                  v-model="diseaseModel.medicalInterpretation">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="常见原因">
                <el-input class="properties-textarea" type="textarea" :rows="3" v-model="diseaseModel.commonReasons">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="建议">
                <el-input class="properties-textarea" type="textarea" :rows="3" v-model="diseaseModel.advise">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('diseaseForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { saveDisease, updateDisease } from '@/api/Lixueseng520/disease'

  export default {
    name: 'disease-edit',
    data() {
      return {
        loading: true,
        optionET: [
          { value: '系统自带', label: '系统自带' },
          { value: '自定义', label: '自定义' }
        ],
        optionOD: [
          { value: '否', label: '否' },
          { value: '是', label: '是' },
          { value: '位置', label: '位置' }
        ],
        optionAG: [
          { value: '男', label: '男' },
          { value: '女', label: '女' }
        ],
        optionMTP: [
          { value: '立即', label: '立即' },
          { value: '一年内', label: '一年内' },
          { value: '半年内', label: '半年内' },
          { value: '三个月内', label: '三个月内' },
          { value: '一个月内', label: '一个月内' },
          { value: '一周内', label: '一周内' }
        ],
        optionCD: [
          { value: '内科', label: '内科' },
          { value: '外科', label: '外科' },
          { value: '妇产科', label: '妇产科' },
          { value: '儿科', label: '儿科' },
          { value: '心血管内科', label: '心血管内科' },
          { value: '消化科', label: '消化科' },
          { value: '肾内科', label: '肾内科' },
          { value: '血液内科', label: '血液内科' },
          { value: '呼吸内科', label: '呼吸内科' },
          { value: '内分泌科', label: '内分泌科' },
          { value: '风湿免疫科', label: '风湿免疫科' },
          { value: '感染科', label: '感染科' },
          { value: '神经内科', label: '神经内科' },
          { value: '肿瘤内科', label: '肿瘤内科' },
          { value: '普外科', label: '普外科' },
          { value: '泌尿外科', label: '泌尿外科' },
          { value: '甲乳外科', label: '甲乳外科' },
          { value: '肛肠外科', label: '肛肠外科' },
          { value: '神经外科', label: '神经外科' },
          { value: '心胸外科', label: '心胸外科' },
          { value: '肝胆外科', label: '肝胆外科' },
          { value: '理疗科', label: '理疗科' },
          { value: '骨科', label: '骨科' },
          { value: '烧伤整形科', label: '烧伤整形科' },
          { value: '耳鼻喉科', label: '耳鼻喉科' },
          { value: '眼科', label: '眼科' },
          { value: '口腔科', label: '口腔科' },
          { value: '精神科', label: '精神科' },
          { value: '皮肤科', label: '皮肤科' },
          { value: '中医科', label: '中医科' },
          { value: '其他', label: '其他' },
        ],
        optionWL: [
          { value: '0星', label: '0星' },
          { value: '1星', label: '1星' },
          { value: '2星', label: '2星' },
          { value: '3星', label: '3星' },
          { value: '4星', label: '4星' },
          { value: '5星', label: '5星' }
        ],
        diseaseModel: {
          id: 0,
          encode: '',
          diseaseName: '',
          exceptionTypes: '',
          occupationalDisease: '',
          applyGender: '',
          medicalTreatmentPeriod: '',
          clinicDepartment: '',
          warningLevel: '',
          restsName: '',
          medicalInterpretation: '',
          commonReasons: '',
          advise: '',
        },
        dialogProps: {
          visible: false,
          action: '',
          title: ''
        },
        activeTabName: 'diseaseInfoTab',
        addDisease: {
          foodName: [
            { required: true, message: '请输入路由名称', trigger: 'blur' },
            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
          ]
        },
        editDisease: {
          foodName: [
            { required: true, message: '请输入路由名称', trigger: 'blur' },
            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
          ]
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.dialogProps.action === 'add') {
              this.doSaveDisease()
            } else {
              this.doUpdateDisease()
            }
          } else {
            return false
          }
        })
      },
      doUpdateDisease() {
        this.loading = true
        updateDisease(this.diseaseModel.id, this.diseaseModel)
          .then(response => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.loading = false
            this.dialogProps.visible = false
            this.$emit('save-finished')
          })
          .catch(error => {
            this.loading = false
            this.outputError(error)
          })
      },
      doSaveDisease() {
        this.loading = true
        saveDisease(this.diseaseModel)
          .then(response => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.loading = false
            this.dialogProps.visible = false
            this.$emit('save-finished')
          })
          .catch(error => {
            this.outputError(error)
          })
      },

      handleDialogClose() {
        this.dialogProps.visible = false
      },
      handleDialogOpen() {
        this.$nextTick(() => {
          this.$refs['diseaseForm'].clearValidate()
          this.$refs['diseaseName'].focus()
        })
      },
      outputError(error) {
        console.log(error.response ? error.response : error.message)
        this.loading = false
        this.$message({
          showClose: true,
          message: '出错了，请按F12查看浏览器日志。',
          type: 'error'
        })
      }
    },
    mounted: function () {
      this.$nextTick(() => {
        this.$on('openEditUserDialog', function (exercise) {
          this.diseaseModel = exercise
          this.dialogProps.action = 'edit'
          this.dialogProps.title = '编辑'
          this.activeTabName = 'diseaseInfoTab'
          this.dialogProps.visible = true
        })
        this.$on('openAddUserDialog', function () {
          this.diseaseModel = {
            roleIds: []
          }
          this.dialogProps.action = 'add'
          this.dialogProps.title = '新增'
          this.activeTabName = 'diseaseInfoTab'
          this.dialogProps.visible = true
        })
      })
    }
  }
</script>

<style lang="scss" scoped>
  .disease-info-tab-pane {
    margin-top: 10px;
  }

  .parent-select {
    width: 250px;
  }

  .properties-textarea {
    width: 496px;
  }
</style>
